<template>
	<view class="viewbox auto p-top40 p-bot140">
		<view class="row ">
			<view class="rank d-flex f-column a-center m-top100 two">
				<view class="row j-centert">
				   <view class="headINE bgba flexac">
					   <image :src="pageData[1].head_image" mode="aspectFill" class="headINE_img"></image>
				   </view>
				   <image src="../../static/imgs/two.png" class="twoIMG"></image>
				</view>
				<text class="color_e2 size30 ellipsis text-center m-top20">{{pageData[1].nick_name}}</text>
				<view class="row f-column a-center m-top40">
					<text class="color_ee size32">{{pageData[1].total_num}}</text>
					<text class="color_58 size28">{{nameint}}</text>
				</view>
			</view>
			<view class="rank d-flex f-column a-center">
				<view class="row j-centert">
				   <view class="headOne bgfe flexac">
					   <image :src="pageData[0].head_image" mode="aspectFill" class="headOne_img"></image>
				   </view>
				   <image src="../../static/imgs/one.png" class="oneIMG"></image>
				</view>
				<text class="color_e2 size30 ellipsis text-center m-top20">{{pageData[0].nick_name}}</text>
				<view class="row f-column a-center m-top40">
					<text class="color_ee size32">{{pageData[0].total_num}}</text>
					<text class="color_58 size28">{{nameint}}</text>
				</view>
			</view>
			<view class="rank d-flex f-column a-center m-top120 three">
				<view class="row j-centert">
				   <view class="headINE bge3 flexac">
					   <image :src="pageData[2].head_image" mode="aspectFill" class="headINE_img"></image>
				   </view>
				   <image src="../../static/imgs/three.png" class="twoIMG"></image>
				</view>
				<text class="color_e2 size30 ellipsis text-center m-top20">{{pageData[2].nick_name}}</text>
				<view class="row f-column a-center m-top40">
					<text class="color_ee size32">{{pageData[2].total_num}}</text>
					<text class="color_58 size28">{{nameint}}</text>
				</view>
			</view>
		</view>
	
	   
	   <view class="row m-top80 nav">
		   <view class="navlist" 
		         :class="{'active':index == current}" 
				 v-for="(item,index) in nav" :key="index"
				 @click="pageBtn(index)">{{item}}</view>
		  
	   </view>
	   
	   <view class="row j-sb bgF2 padding20-40 color_ad size26">
		   <text>排名</text>
		   <text>用户</text>
		   <text>{{nameint}}</text>
	   </view>
	   <view class="row bgwhite">
		   
		   <view class="row a-center padding20-40" v-for="(item,index) in pageData.slice(3)" :key="index">
			   <text class="color_33 size28 bold">{{index | indexNum}}</text>
			   <view class="flex-1 bor_999 m-left30 d-flex j-sb a-center p-top20 p-bot40">
				   <view class="flex-1 d-flex a-center">
					   <view class="listHead flexac">
						   <image :src="item.head_image" mode="aspectFill" class="listIU"></image>
					   </view>
					   <text class="color_33 name ellipsis">{{item.nick_name}}</text>
				   </view>
				   <text class="color_ff3 size34">{{item.total_num}}</text>
			   </view>
		   </view>
			   
		   
	   </view>
	   
	   
	   <view class="fot d-flex a-center p-left70 p-right60 " v-if="my">
		   <text class="white size32">{{my.rank}}</text>
		   <view class="flex-1 d-flex j-sb a-center m-left40">
			   <view class="d-flex a-center">
				   <image :src="my.head_image" mode="aspectFill" class="fotLog bor_radius"></image>
				   <text class="white name ellipsis">{{my.nick_name}}</text>
			   </view>
			   <text class="color_ffe size34">{{my.total_num}}</text>
		   </view>
	   </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0,
				pageData:[],
				my:'',
				nav:['消费榜','邀请榜','持仓榜'],
			}
		},
		onLoad() {
			this.priceRank();
		},
		methods: {
			
			priceRank(){
				let url;
				if(this.current == 0){
					url = '/index/priceRank'
				}else if(this.current == 1){
					url = '/index/teamRank'
				}else if(this.current == 2){
					url = '/index/goodsRank'
				}
				this.$http.get(url).then(res=>{
					if(res.code !=1) return;
					this.pageData = res.data.list;
					if(res.data.my) this.my = res.data.my
				})
			},
			
			pageBtn(index){
				this.current = index;
				this.priceRank();
			}

		},
		computed:{
			nameint(){
				if(this.current == 0) return '消费数';
				if(this.current == 1) return '邀请数';
				if(this.current == 2) return '持仓数';
			}
		},
		filters:{
			indexNum(val){
				let num = val+4;
				return (num+'').padStart(2,'0')
			}
		}
	}
</script>
<style>
	page {
		background-color: #1e201f;
	}
</style>
<style lang="scss" scoped>
	.rank{
		width:33.3%;
	}
	.headINE{
		width:108rpx;
		height: 108rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-top:-50rpx;
	}
	.headINE_img{
		width:100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.twoIMG{
		width:162rpx;
		height: 47rpx;
		margin-top:-20rpx;
	}
	.headOne{
		width:136rpx;
		height: 136rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.headOne_img{
		width:126rpx;
		height: 126rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.oneIMG{
		width:206rpx;
		height: 60rpx;
		margin-top:-20rpx;
	}
	.three{
		background-image: url(@/static/imgs/threebg.png);
		background-repeat: no-repeat;
		background-size: 230rpx 266rpx;
	}
	.two{
		background-image: url(@/static/imgs/twobg.png);
		background-repeat: no-repeat;
		background-size: 230rpx 266rpx;
	}
	.nav{
		width:100%;
		height: 87rpx;
		background-image: url(@/static/imgs/he.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.navlist{
		width:33.3%;
		height: 87rpx;
		line-height: 87rpx;
		text-align: center;
		color:#ffffff;
		font-size:28rpx;
	}
	.active{
		width:33.3%;
		height: 110rpx;
		line-height: 110rpx;
		background: linear-gradient(to bottom, #c79c7c 0%, #635756 100%);
		border-radius: 10rpx 10rpx  0 0;
		margin-top: -20rpx;
		font-size:32rpx;
	}
	.listHead{
		width:100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #e6e6e6;
	}
	.name{
		width:300rpx;
		margin-left:40rpx;
	}
	.listIU{
		width:92rpx;
		height: 92rpx;
		border-radius: 50%;
	}
	.fot{
		width:100%;
		height: 136rpx;
		background-image: url(@/static/imgs/ubg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: fixed;
		bottom: 0;
		left:0;
	}
	.fotLog{
		width:88rpx;
		height: 88rpx;
	}
</style>
